<template>
  <div class="Hotsearch">
    <div class="search">
      <i class="iconfont icon-zuojiantou" @click="goback()"></i>
      <van-search
        v-model="keyword"
        background="#ff5555"
        placeholder="搜索您想要的区域"
      />
    </div>
    <div class="hot">
      <h1>热门搜索</h1>
      <van-tag type="primary" size="large">回龙观</van-tag>
      <van-tag type="primary" size="large">望京</van-tag>
      <van-tag type="primary" size="large">宋家庄</van-tag>
      <van-tag type="primary" size="large">百子湾</van-tag>
      <van-tag type="primary" size="large">天通苑</van-tag>
      <van-tag type="primary" size="large">芍药居</van-tag>
      <van-tag type="primary" size="large">立水桥</van-tag>
      <van-tag type="primary" size="large">常营</van-tag>
      <van-tag type="primary" size="large">来广营</van-tag>
      <van-tag type="primary" size="large">公寓</van-tag>
    </div>

    <p>历史搜索</p>
    <button class="btn">清楚搜索记录</button>
    <button class="btn btn1" @click="serchHouse">确认</button>
  </div>
</template>

<script>
import { getHouseByWord } from "../../api/index";
export default {
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    goback() {
      this.$router.replace({ name: "home" });
    },
    goback1() {
      this.$router.replace({ name: "Current" });
    },
    async serchHouse() {
      // 点击某城市，发送请求关键字获取到城市对应的房源列表，存入state（vuex），跳转到当前页
      let {
        data: { data: houses },
        status,
      } = await getHouseByWord({ type: this.keyword });
      if (status != 200) return;
      this.$store.state.newhouseList = houses;
      this.$router.replace({ name: "current" });
    },
  },
};
</script>

<style scoped lang="less">
.Hotsearch {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;
  .search {
    background-color: #ff5654;

    i {
      color: #fff;
      padding-left: 30px;
      font-size: 40px;
    }
    span {
      color: #fff;
      font-size: 40px;
      padding-left: 10px;
    }
    .van-search {
      display: inline-block;
      width: 80%;
    }
  }
  .hot {
    width: 700px;
    height: 450px;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0px 0px 5px 0px #ccc;
    margin: 0px 20px;
    float: left;
    border-radius: 5px;
    h1 {
      font-size: 32px;
      color: #000000;
      opacity: 70%;
      margin: 40px 30px;
    }
    .van-tag--large {
      width: 90px;
      height: 38px;
      background-color: #ebebeb;
      color: #000000;
      opacity: 70%;
      font-size: 26px;
      margin: 15px 25px;
      display: inline-block;
      text-align: center;
    }
  }
  p {
    width: 150px;
    height: 60px;
    font-size: 32px;
    color: #000000;
    opacity: 70%;
    font-weight: bolder;
    margin: 20px 40px;
    text-align: center;
    display: inline-block;
  }
  .btn {
    border: 3px solid #ccc;
    width: 700px;
    text-align: center;
    height: 90px;
    border-radius: 5px;
    margin: 0px 0 0 20px;
    background-color: #fff;
    color: #000000;
    opacity: 80%;
    font-size: 30px;
  }
  .btn1{
    margin-top: 20px;
    background: #ff5654;
    color: #fff;
  }
}
</style>